<template>
  <div class="form-item" :data-hideline="hideLine">
    <div class="left">
      <span class="icon"><slot name="icon" /></span>
      <div class="content">
        <span v-if="slots.content" class="content">
          <slot name="content" />
        </span>
        <span v-else-if="slots.placeholder" class="placeholder">
          <slot name="placeholder" />
        </span>
      </div>
    </div>
    <slot name="right" />
  </div>
</template>

<script>
export default {
  props: {
    hideLine: {
      type: Boolean,
      default: false
    }
  },
  setup(props, {slots}){
    return {
      slots
    }
  }
}
</script>

<style lang="less" scoped>
.form-item{
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  align-items: center;
  padding: .8rem 1.2rem;
  position: relative;
  &::after{
    content: '';
    display: block;
    height: 1px;
    background-color: #f5f5f5;
    position: absolute;
    bottom: 0;
    right: 0;
    width: calc(100% - 2.9rem);
  }
  &[data-hideline="true"]::after{
    display: none;
  }
  .left{
    display: flex;
    align-items: center;
    flex: 1 0 auto;
    max-width: 100%;
  }
  .content{
    flex: 1 0 auto;
  }
  .icon{
    display: inline-block;
    font-size: 1.2em;
    height: 1em;
    margin-right: .5rem;
    width: 1.2rem;
  }
  .placeholder{
    color: #999;
  }
}
</style>